<script setup lang="ts">
import { menuApi } from "@/api/admin/menu";
import {
  ElCard,
  ElTree,
  ElTable,
  ElTableColumn,
  ElButton,
  ElScrollbar,
  // ElMessage,
  // ElPopconfirm,
} from "element-plus";
import { onMounted, ref } from "vue";
import PermissionForm from "./component/PermissionForm.vue";
// import { deepClone } from "@/utils";
// import { permissionApi } from "@/api/permission";
const PermissionFormRef = ref<any>(null);

const permissionTable = ref<any>([]);

const menuTree = ref<any>([]);

const MenuId = ref<string>("");

// 获取菜单树数据
const getMenuTree = async () => {
  const menuTreeRes = await menuApi.getRoutesMenuTreeApi();
  menuTree.value = menuTreeRes;
};

onMounted(() => {
  getMenuTree();
});

const getPermission = async (menuId: string) => {
  const ret = await menuApi.getMenuPermission(menuId);
  if (ret.code === 200) {
    permissionTable.value = ret.data;
  }
};

const handleNodeClick = async (node: any) => {
  const hasChildren = node.children && node.children.length > 0;
  if (!hasChildren) {
    MenuId.value = node.id;
    getPermission(node.id);
  }
};

const handleAdd = () => {
  PermissionFormRef.value.open(MenuId.value, permissionTable.value);
};

// const handleEdit = (permission: any) => {
//   const newPermission = deepClone(permission);
//   // console.log(newPermission);
//   PermissionFormRef.value.open(MenuId.value, newPermission);
// };

// const handleDel = async (id: string) => {
//   const ret = await permissionApi.removePermissionApi(id);
//   if (ret.code === 200) {
//     ElMessage.success("删除成功");
//     getPermission(MenuId.value);
//   }
// };

const defaultProps = {
  children: "children",
  label: (node: any) => node.meta.title,
};
</script>

<template>
  <PermissionForm ref="PermissionFormRef" @update="getPermission" />
  <div class="permission">
    <div class="left">
      <el-scrollbar height="450px">
        <ElCard>
          <template #header>
            <div class="card-header">
              <span>菜单目录</span>
            </div>
          </template>
          <el-tree
            highlight-current
            style="max-width: 600px"
            :data="menuTree"
            :props="defaultProps"
            @node-click="handleNodeClick"
          />
        </ElCard>
      </el-scrollbar>
    </div>

    <div class="right">
      <ElCard>
        <template #header>
          <div class="card-header">
            <ElButton type="primary" @click="handleAdd">设置菜单权限</ElButton>
          </div>
        </template>
        <el-table :data="permissionTable">
          <el-table-column align="center" prop="label" label="权限名称" />
          <el-table-column align="center" prop="value" label="权限元数据" />
          <!-- <el-table-column align="center" prop="method" label="操作" width="140">
            <template #default="scope">
              <el-button type="primary" @click="handleEdit(scope.row)">修改</el-button>
              <el-popconfirm
                title="确定要删除吗？"
                confirm-button-text="删除"
                cancel-button-text="取消"
                confirm-button-type="danger"
                cancel-button-type="info"
                @confirm="handleDel(scope.row.id)"
                :hide-after="0"
              >
                <template #reference>
                  <el-button type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column> -->
        </el-table>
      </ElCard>
    </div>
  </div>
</template>

<style lang="less" scoped>
.permission {
  width: 100%;
  display: flex;
  .left {
    min-width: 200px;
    max-width: 240px;
  }
  .right {
    flex: 1;
    padding-left: 20px;
    overflow: auto;
    // width: 100%;
  }
}
</style>
